@import './Global.less';

.saver
{
    overflow:hidden;
    position: relative;
    width:100%;
    height:25%;
    padding:3%;
    border:1px solid @BorderGrey;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;

    >.group
    {
        display: flex;
        position: relative;
        // width:max-content;
        height:80%;

        .colorBlock
        {
            position:relative;
            flex-shrink:0;
            height:100%;
            margin-right:1.5rem;
            cursor: pointer;

            &:hover
            {
                box-shadow: 0 0 4px 2px darkgrey;
        
                >svg
                {
                    opacity: 1;
                }
            }
            &.selected
            {
                box-shadow: 0 0 2px 2px black;
            }
        
            >svg
            {
                position: absolute;
                right:7%;
                bottom:7%;
                width:25%;
                height:25%;
                fill:white;
                opacity: 0;
                transition: opacity 0.3s;
        
                &:hover
                {
                    fill:#f94831;
                }
            }
        }
    }
    >.slideBar
    {
        position: absolute;
        visibility: hidden;
        left:50%;
        bottom:0;
        transform: translateX(-50%);
        width:100%;
        height:24%;
        border-top:1px solid lightgrey;

        &.display
        {
            visibility: visible;
        }

        >.slideBar_slider
        {
            position: absolute;
            width:15%;
            height:100%;
            border-bottom-left-radius: 36px;
            border-bottom-right-radius: 36px;
            background:lightgrey;

            &:hover
            {
                background:@InteractBlue;
            }
        }
    }
}